<template>
  <div class="webView login">
    <div class="login_info">
      <div class="login_form">
        <p class="system_title">运维平台模块开发框架</p>
        <el-form
          :model="loginForm"
          ref="loginRef"
          :status-icon="false"
          :rules="rules"
          v-if="logonmode"
        >
          <el-form-item class="login_item" prop="username">
            <el-input
              placeholder="用户名"
              prefix-icon="fa fa-user"
              v-model="loginForm.username"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            class="login_item"
            prop="password"
            style="margin-bottom: 10px"
          >
            <el-input
              placeholder="密码"
              prefix-icon="fa fa-lock"
              type="password"
              v-model="loginForm.password"
              readonly
              onfocus="this.removeAttribute('readonly');"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <!-- <el-checkbox v-model="loginForm.rememberPassword">记住密码</el-checkbox> -->
        <el-button type="primary" @click="loginSystem" style="width: 100%;"
        >登录
        </el-button>
        <!-- <el-button type="primary" @click="chenge" style="width: 100%; margin-left: 0;">
          {{logonmode?'手机号验证码登录':'账号密码登录'}}
        </el-button>-->
      </div>
    </div>
    <!--<div class="website_info">-->
    <!--<a href="http://www.jnaw.top" target="_blank">©2022 AllView. All rights-->
    <!--reserved.</a>-->
    <!--&lt;!&ndash;      <a href="http://www.jnaw.top" target="_blank">济南奥维信息科技公司</a>&ndash;&gt;-->
    <!--&lt;!&ndash;      <p>©2022 AllView. All rights reserved.</p>&ndash;&gt;-->
    <!--</div>-->
  </div>
</template>
<script>
import { Message, Loading } from 'element-ui'
import Vue from 'vue'
import qs from 'qs'

export default {
  data() {
    return {
      // 登录表单
      loginForm: {
        // 用户名
        username: 'admin',
        // 密码
        password: 'admin',
        // 用户名
        phone: '',
        // 密码
        vcode: '',
        // 是否记住密码
        rememberPassword: false,
      },
      vcodeText: '获取验证码',
      logonmode: true,
      rules: {
        username: [
          {
            validator: this.formVerification,
            trigger: 'blur',
          },
        ],
        password: [
          {
            validator: this.formVerification,
            trigger: 'blur',
          },
        ],
        phone: [
          {
            validator: this.formVerification,
            trigger: 'blur',
          },
        ],
        vcode: [
          {
            validator: this.formVerification,
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    sessionStorage.setItem(this.$apis.getLocalKey().user, '')
    this.$parent.idtc = false
  },
  mounted() {
    // 初始化 登录
    this.init()
  },
  methods: {
    authentication_code() {
      const _this = this
      if (!/^1[0-9]{10}$/.test(_this.loginForm.phone)) {
        Message.error('手机号格式不正确')
        return
      }
      const datas = {
        phone: _this.loginForm.phone,
      }
      if (_this.vcodeText == '获取验证码') {
        _this.$apis
          .authentication_code(datas)
          .then((res) => {
            // console.log(res)
            if (res.result == 0) {
              // 倒计时60秒
              let timer_num = 60
              var timeClock = setInterval(() => {
                timer_num--
                _this.vcodeText = timer_num
                if (timer_num == 0) {
                  clearInterval(timeClock)
                  _this.vcodeText = '获取验证码'
                }
              }, 1000)
              _this.formData.vcode = res.vcode
            } else {
              Message.error('查询失败')
            }
          })
          .catch((err) => {
            console.log(err, 11)
          })
      }
    },
    init() {
      // 表单
      const loginForm = this.loginForm
      // 判断 账号密码 是否存在 cookie 内
      if (
        this.$utils.getCookie('username') &&
        this.$utils.getCookie('password')
      ) {
        // cookie 取出账号赋值
        loginForm.username = this.$utils.getCookie('username')
        // cookie 取出密码赋值
        loginForm.password = this.$utils.getCookie('password')
        // cookie 取出记住密码的状态赋值
        loginForm.rememberPassword = true
      }
    },
    // 登录
    loginSystem() {
      const _this = this
      const loginData = {
        result: 0,
        data: {
          role_name: 'admin',
          name: 'admin',
          id: 1,
          role: 1,
        },
        message: '',
      }
      // 将当前登录的角色存入本地(menu.vue中使用)
      localStorage.setItem(
        this.$apis.getLocalKey().role,
        loginData.data.role_name,
      )
      // 将当前登录人的信息存入本地
      localStorage.setItem(
        this.$apis.getLocalKey().loginPersonnelInformation,
        JSON.stringify(loginData.data),
      )
      // 用于浏览器地址栏权限控制（router/index.js）
      sessionStorage.setItem(
        this.$apis.getLocalKey().user,
        JSON.stringify(loginData.data),
      )
      localStorage.setItem(this.$apis.getLocalKey().userID, loginData.data.id)
      // console.log('开始跳转页面了')

      _this.$apis.u_get_token().then((res) => {
        if (res.result == 0) {
          const token = res.data
          sessionStorage.setItem('token', token)
        }
      })

      _this.$router.push({
        path: '/admin/application/applist',
      })
    },
    jurisdictionJudge(res) {
      this.$parent.idtc = true

      // console.log("res.role_name:",res)
      // 将当前登录的角色存入本地(menu.vue中使用)
      localStorage.setItem(this.$apis.getLocalKey().role, res.role_name)
      // 将当前登录人的信息存入本地
      localStorage.setItem(
        this.$apis.getLocalKey().loginPersonnelInformation,
        JSON.stringify(res),
      )
      // 用于浏览器地址栏权限控制（router/index.js）
      sessionStorage.setItem(
        this.$apis.getLocalKey().user,
        JSON.stringify(res),
      )
      localStorage.setItem(this.$apis.getLocalKey().userID, res.id)
      console.log(
        '本地存储的数据==========',
        localStorage.getItem(this.$apis.getLocalKey().role),
      )
      /*     if (['root', 'admin'].includes(res.role_name)) {
          this.$router.push({
            path: '/sxgh/homeManage/homeManage'
          })
        } else if (['planner', 'consultant'].includes(res.role_name)) {
          this.$router.push({
            path: '/sxgh/customerManage/customerList'
          })
        } else if (['goods', 'bonus', 'media'].includes(res.role_name)) {
          this.$router.push({
            path: '/sxgh/homeManage/homeManage'
          })
        } else {
          Message.error('您没有权限登录管理端')
        } */

      // switch (res.role_name) {
      //  case 'admin':
      //    this.$router.push({
      //      path: '/sxgh/goodsManage/goodsManage'
      //    })
      //    break
      //  case 'consumer':
      //    this.$router.push({
      //      path: '/sxgh/user/userList'
      //    })
      //    break

      // }
    },
    // 登录表单验证
    formVerification(rule, value, callback) {
      if (rule.field === 'username') {
        if (!value) {
          return callback(new Error('账号不能为空'))
        }
      }
      // 密码验证
      if (rule.field === 'password') {
        if (!value) {
          return callback(new Error('密码不能为空'))
        }
      }
      if (rule.field === 'phone') {
        if (!value) {
          return callback(new Error('手机号不能为空'))
        }
      }
      if (rule.field === 'vcode') {
        if (!value) {
          return callback(new Error('验证码不能为空'))
        }
      }
      callback()
    },
    chenge() {
      this.logonmode = !this.logonmode
    },
  },
}
</script>

<style lang="scss">
.login {
  position: relative;
  background-image: url(../assets/img/background.png);
  background-size: cover;
  background-position: 50%;
}

.login_info {
  position: absolute;
  width: 350px;
  height: 400px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.login_form {
  background: #fff;
  padding: 25px 20px 40px 20px;
  border-radius: 5px 5px 5px 5px;

  button {
    width: 100%;
    margin: 20px 0 0;
  }
}

.login_form .el-checkbox {
  margin: 8px 0 0 0;
}

.system_title {
  font-size: 24px;
  text-align: center;
  padding: 0 0 20px;
  font-weight: bold;
  color: #737373;
}

.website_info {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 45px;

  a {
    &:hover {
      text-decoration: underline;
    }
  }

  a,
  p {
    font-size: 14px;
    /*color: #000;*/
    color: #fff;
  }
}
</style>
